<!doctype html>
<html lang="zxx">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <link rel="stylesheet" href="/css/owl.theme.default.min.css">

    <link rel="stylesheet" href="/css/owl.carousel.min.css">

    <link rel="stylesheet" href="/css/remixicon.css">

    <link rel="stylesheet" href="/css/meanmenu.min.css">

    <link rel="stylesheet" href="/css/animate.min.css">

    <link rel="stylesheet" href="/css/style.css">

    <link rel="stylesheet" href="/css/responsive.css">

    <link rel="stylesheet" href="/layui/css/layui.css">

    <title>全部商品</title>
    <style>

        .navbar-category-dropdown {
            display: none; /* 默认隐藏 */
            position: absolute; /* 绝对定位脱离文档流 */
            z-index: 1000; /* 确保悬浮层在最上层 */
            background: #fff; /* 背景色防止透明 */
            box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* 添加阴影增强层次感 */
            min-width: 200px; /* 设置最小宽度避免内容挤压 */
        }

        .navbar-category:hover .navbar-category-dropdown {
            display: block; /* 鼠标悬停父容器时显示下拉层 */
        }

        .navbar-category-dropdown {
            opacity: 0;
            transition: opacity 0.3s ease;
            top: 100%; /* 下拉层紧贴父容器底部 */
        }
        .navbar-category:hover .navbar-category-dropdown {
            opacity: 1;
        }
    </style>
</head>
<body>
<input  type="hidden" id="userId" th:value="${session.USER_LOGIN.id}"/>
<div class="preloader">
    <div class="content">
        <div class="box"></div>
    </div>
</div>
<header class="header-area">
    <div class="top-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <ul class="header-left-content">
                        <li>
                            <a href="about.html">
                                关于我们
                            </a>
                        </li>
                        <li>
                            <a href="store-location.html">
                                店铺地址
                            </a>
                        </li>
                        <li>
                            需要帮助? Call:
                            <a href="tel:+1-(514)-321-4567">
                                <span>+1 (514) 321-4567</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-4">
                    <div class="header-right-content">
                        <ul>
                            <li>
                                <a href="/page/mycount">登录账号</a>
                            </li>
                            <li>
                                <a href="/page/dashboard">个人信息</a>
                            </li>
                            <li>
                                <div class="navbar-option-item navbar-option-language dropdown language-option">
                                    <button class="dropdown-toggle" type="button" id="language2"
                                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="lang-name">English</span>
                                    </button>
                                    <div class="dropdown-menu language-dropdown-menu" aria-labelledby="language2">
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/english.png" alt="Image">
                                            English
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/deutsch.png" alt="Image">
                                            Deutsch
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/china.png" alt="Image">
                                            简体中文
                                        </a>
                                        <a class="dropdown-item" href="#">
                                            <img src="/picture/arbic.png" alt="Image">
                                            العربيّة
                                        </a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="middle-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-3">
                    <div class="logo">
                        <a href="">
                            <img src="/picture/logo.png" alt="Image">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="navbar-area only-home-one-sticky">
        <div class="mobile-responsive-nav">
            <div class="container">
                <div class="mobile-responsive-menu">
                    <!--  导航侧边栏  -->
                    <div class="logo">
                        <a href="">
                            <img src="/picture/logo.png" alt="logo">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="desktop-nav">
            <div class="container">
                <nav class="navbar navbar-expand-md navbar-light">
                    <div class="navbar-category">
                        <button type="button">
                            <i class="ri-menu-line"></i>
                            全部分类
                            <i class="arrow-down ri-arrow-down-s-line"></i>
                        </button>
                        <div class="navbar-category-dropdown">
                            <ul id="categorylist">
                            </ul>
                        </div>
                    </div>
                    <div class="collapse navbar-collapse mean-menu" id="navbarSupportedContent">
                        <ul class="navbar-nav">
                            <li class="nav-item float-end">
                                <a href="/page/index" class="nav-link active">
                                    首页
                                </a>
                            </li>
                            <li class="nav-item mega-menu">
                                <a href="/page/products" class="nav-link">
                                    全部商品
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="/page/dashboard" class="nav-link">
                                    个人信息管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="/page/cart" class="nav-link">
                                    我的购物车
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>
<div class="modal fade cart-shit" id="exampleModal-cart" tabindex="-1" aria-hidden="true">
    <div class="cart-shit-wrap">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close-btn" data-bs-dismiss="modal">
                        <i class="ri-close-fill"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <ul class="cart-list">
                        <li>
                            <img src="/picture/product-1.jpg" alt="Image">
                            <a href="shopping-cart.html">
                                DFMALB 20V Max XX Oscillating Multi Tool Variable Speed Tool
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                        <li>
                            <img src="/picture/product-2.jpg" alt="Image">
                            <a href="shopping-cart.html">
                                Power Tools Set Chinese Manufacturer Production 50V Lithu Battery
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                        <li>
                            <img src="/picture/product-3.jpg" alt="Image">
                            <a href="shopping-cart.html">
                                Electrical Magnetic Impact Power Hammer Drills Machine
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                        <li>
                            <img src="/picture/product-4.jpg" alt="Image">
                            <a href="shopping-cart.html">
                                Professional Cordless Drill Power Tools Set Competitive Price
                            </a>
                            <span>$125.00</span>
                            <i class="ri-close-fill"></i>
                        </li>
                    </ul>
                    <ul class="payable">
                        <li>
                            Payable total
                        </li>
                        <li class="total">
                            <span>$564.00</span>
                        </li>
                    </ul>
                    <ul class="cart-check-btn">
                        <li>
                            <a href="shopping-cart.html" class="default-btn">
                                View Cart
                            </a>
                        </li>
                        <li class="checkout">
                            <a href="checkout.html" class="default-btn">
                                Checkout
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page-title-area">
    <div class="container">
        <div class="page-title-content">
            <ul>
                <li>
                    <a href="/page/index">
                        首页
                    </a>
                </li>
                <li class="active">全部商品</li>
            </ul>
        </div>
    </div>
</div>
<section class="products-area ptb-54">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="sale-offer-bg product-page">
                        <h5>清仓大甩卖 - <span>低至六折起</span></h5>
                        <h3>全场高品好货</h3>
                        <a href="/page/products" class="default-btn">
                            <i class="ri-shopping-cart-line"></i>
                            立刻购买
                        </a>
                </div>
                <div class="showing-result">
                    <div class="row align-items-center">
                        <div class="col-lg-6 col-md-6">
                            <div class="products-filter-options">
                                <div class="view-list-row">
                                    <div class="view-column">
                                        <a href="#" class="icon-view-three active">
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                        </a>
                                        <a href="#" class="view-grid-switch ">
                                            <span></span>
                                            <span></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="products-filter" class="products-collections-listing row justify-content-center products-row-view" type="productlist">
                    <!--   动态html插入位置     -->
                </div>
            </div>
        </div>
    </div>
</section>
<div id="pagination" style="text-align: center"></div>
<section class="subscribe-area pt-54 pb-30">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-2">
                <div class="logo">
                    <a href="/page/index">
                        <img src="/picture/white-logo.png" alt="Image">
                    </a>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="subscribe-content">
                    <span>全部商品三折处理</span>
                    <h3>七天无理由退货,保障您的权益</h3>
                    <p>全场货物免费送运费险,让您退货无忧</p>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="copy-right-area">
    <div class="container">
        <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://www.downdemo.com">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
        </p>
    </div>
</div>
<div class="modal fade product-view-one" id="exampleModal">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <button type="button" class="close" data-bs-dismiss="modal">
<span aria-hidden="true">
<i class="ri-close-line"></i>
</span>
            </button>
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="product-view-one-image">
                        <div id="big" class="owl-carousel owl-theme">
                            <div class="item">
                                <img src="/picture/product-1.jpg" alt="Image">
                            </div>
                            <div class="item">
                                <img src="/picture/product-2.jpg" alt="Image">
                            </div>
                            <div class="item">
                                <img src="/picture/product-3.jpg" alt="Image">
                            </div>
                            <div class="item">
                                <img src="/picture/product-4.jpg" alt="Image">
                            </div>
                            <div class="item">
                                <img src="/picture/product-5.jpg" alt="Image">
                            </div>
                            <div class="item">
                                <img src="/picture/product-6.jpg" alt="Image">
                            </div>
                        </div>
                        <div id="thumbs" class="owl-carousel owl-theme">
                            <div class="item">
                                <img src="/picture/product-1.jpg" alt="Image">
                            </div>
                            <div class="item">
                                <img src="/picture/product-2.jpg" alt="Image">
                            </div>
                            <div class="item">
                                <img src="/picture/product-3.jpg" alt="Image">
                            </div>
                            <div class="item">
                                <img src="/picture/product-4.jpg" alt="Image">
                            </div>
                            <div class="item">
                                <img src="/picture/product-5.jpg" alt="Image">
                            </div>
                            <div class="item">
                                <img src="/picture/product-6.jpg" alt="Image">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="product-content">
                        <h3>
                            Cordless Drill Professional Combo Drill And Screwdriver
                        </h3>
                        <div class="product-review">
                            <div class="rating">
                                <i class="ri-star-fill"></i>
                                <i class="ri-star-fill"></i>
                                <i class="ri-star-fill"></i>
                                <i class="ri-star-fill"></i>
                                <i class="ri-star-fill"></i>
                            </div>
                            <a href="#" class="rating-count">4 Reviews</a>
                        </div>
                        <div class="price">
                            <span class="new-price">$119.0 <del>$219.0</del></span>
                            <span class="in-stock">In Stock (8 Items)</span>
                        </div>
                        <ul class="product-info">
                            <li>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At magnam ad reprehenderit
                                    fuga nam, non odit necessitatibus facilis beatae temporibus</p>
                            </li>
                            <li>
                                <span>SKU:</span>
                                001
                            </li>
                            <li>
                                <span>Availability:</span>
                                Available
                            </li>
                            <li>
                                <span>Brand:</span>
                                Ehay
                            </li>
                            <li>
                                <span>Categories:</span>
                                <a href="">Power Drill</a>
                            </li>
                        </ul>
                        <div class="product-color-switch">
                            <ul>
                                <li>
                                    <span>Color:</span>
                                </li>
                                <li>
                                    <button title="Black" class="color-black"></button>
                                </li>
                                <li>
                                    <button title="White" class="color-white"></button>
                                </li>
                                <li class="active">
                                    <button title="Green" class="color-green"></button>
                                </li>
                                <li>
                                    <button title="Yellow Green" class="color-yellowgreen"></button>
                                </li>
                                <li>
                                    <button title="Teal" class="color-teal"></button>
                                </li>
                            </ul>
                        </div>
                        <div class="product-add-to-cart">
                            <div class="input-counter">
<span class="minus-btn">
<i class="ri-subtract-line"></i>
</span>
                                <input type="text" value="1">
                                <span class="plus-btn">
<i class="ri-add-line"></i>
</span>
                            </div>
                            <a href="javascript:;" class="default-btn">
                                <i class="ri-shopping-cart-line"></i>
                                Add To Cart
                            </a>
                        </div>
                        <div class="wishlist-btn">
                            <a href="wishlist.html" class="default-btn">
                                <i class="ri-heart-line"></i>
                                Wishlist
                            </a>
                        </div>
                        <div class="share-this-product">
                            <ul>
                                <li>
                                    <span>Share</span>
                                </li>
                                <li>
                                    <a href="javascript:;" target="_blank">
                                        <i class="ri-facebook-fill"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" target="_blank">
                                        <i class="ri-instagram-line"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" target="_blank">
                                        <i class="ri-linkedin-fill"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" target="_blank">
                                        <i class="ri-twitter-fill"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="go-top">
    <i class="ri-arrow-up-s-fill"></i>
    <i class="ri-arrow-up-s-fill"></i>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/meanmenu.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/wow.min.js"></script>
<script src="/js/range-slider.min.js"></script>
<script src="/js/form-validator.min.js"></script>
<script src="/js/contact-form-script.js"></script>
<script src="/js/ajaxchimp.min.js"></script>
<script src="/js/custom.js"></script>

<script src="/layui/layui.all.js"></script>

<script type="text/html" class="productitem">
 <div class="col-lg-6 col-md-6">
  <div class="single-products" id="pid" type="">
   <div class="product-img" >
       <a href="">
     <img src="" alt="Image" name="productpic">
       </a>
   </div>
   <div class="product-content" style="text-align: center" >
       <ul type="productname">
       </ul>
    <ul class="products-price">
     <li type="productprice">
      价格
      <del type="productoldprice">旧价格</del>
     </li>
     <li>
      <span type="productstate">状态</span>
     </li>
    </ul>
    <ul class="products-cart-wish-view">
     <li>
      <a class="default-btn" type="addincart">
       <i class="ri-shopping-cart-line"></i>
       加入购物车
      </a>
     </li>
    </ul>
   </div>
  </div>
 </div>
</script>

<!--侧边导航栏-->
<script type="text/html" id="categoryitem">
    <li style="text-align: center">
        <a href="#">{{name}}</a>
    </li>
</script>
<script th:inline="javascript">
    const pid =/*[[${pid}]]*/
    layui.use('laypage', function() {
        window.laypage = layui.laypage;
    });
     let allData = [];
     let currentPage = 1;
     const pageSize = 10;
     console.log("pid:"+pid)
     $.ajax({
         url: '/product/getlistbypid',
         data:{pid},
         async: false,
         success: function(result) {
             allData = result;
             renderPage(currentPage);
             initPagination();
         }
     });
     function renderPage(page){
         const start = (page-1)*pageSize;
         const end = start+pageSize;
         const pageData = allData.slice(start,end);
         $("[type=productlist]").empty();
         for(let i=0;i<pageData.length;i++){
             let item=$(".productitem").text();
             const $item=$(item);
             $item.find('[name=productpic]').attr('src','/'+pageData[i].defaultimg);
             $item.find('a').attr('href','/page/putid?id='+pageData[i].id);
             $item.find('#pid').attr('type',pageData[i].id);
             $item.find('[type=productname]').text(pageData[i].name);
             $item.find('[type=productprice]').text('￥'+pageData[i].price);
             $item.find('[type=productoldprice]').text(pageData[i].oldprice);
             let state=pageData[i].state;
             console.log(state);
             if(state==1||state==3){
                 $item.find('[type=productstate]').text('在售');
             }else if(state==2){
                 $item.find('[type=productstate]').text('预购');
             }
             $("[type=productlist]").append($item);
         }
     }


     function initPagination() {
         layui.use('laypage', function() {
             laypage.render({
                 elem: 'pagination',
                 count: allData.length,
                 limit: pageSize,
                 theme:'#FF5722',
                 curr: currentPage,
                 jump: function(obj) { // 页码切换回调
                     currentPage = obj.curr;
                     renderPage(currentPage);
                 }
             });
         });
     }

     $("[type=addincart]").on('click',function(event){
         event.preventDefault();
         const userID= parseInt($('#userId').val(),10);
         let id=$(this).closest("#pid").attr('type');
         $.ajax({
             url:'/cart/add',
             data:{userid:userID,productid:id},
             async: false,
             success:function(){
                 layer.msg("添加成功",{icon:1,time:1200});
             }
         })
     })

    $("[name=productpic]").on('click',function(){
        let id=$(this).closest("#pid").attr('type');
        $.ajax({
            url:'/page/putid',
            data:{id:id},
            success:function(){
            }
        })
    })

</script>
<script>
    const $ = layui.$;
    $.ajax({
        url: '/category/getchildren',
        data: {id: -1},
        success: function (result) {
            for (let i = 0; i < result.length; i++) {
                let item = $("#categoryitem").text();
                const $item = $(item);
                $item.find("a").text(result[i].name);
                $("#categorylist").append($item);
            }
        }
    });
</script>
</body>
</html>